<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="center_common" />
<title>个人信息</title>
<style type="text/css">
em.error {
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	margin-left: 20px;
	background: url("${ctxWebStatic}/images/error_img.png") no-repeat 0px
		0px;
	padding-left: 24px;
	color: #d3001e;
	font-size: 16px;
	font-family: "微软雅黑";
}
</style>
<script type="text/javascript">
	var subflag = false;
	
	$(document).ready(function() {
		if("${resultMessage}" != ""){
			alert("${resultMessage}");
			window.location.href = "${ctxWeb}/logoutLogin";
		}
		
		$("#updateForm").validate({
			rules : {
				email : {
					required : true,
					email : true,
					onkeyup : false,
					remote : { 
						type : "POST",
						url : "${ctxWeb}/register/checkEmail", //servlet
						data : {
							email : function() {
								return $("#email").val();
							},
							id : function() {
								return "${user.id}";
							}
						}
					}
				},
				checkPassword : {
					required : true,
					onkeyup : false,
					minlength : 8,
					remote : { 
						type : "POST",
						url : "${ctxWeb}/userInfo/checkPassword", //servlet
						data : {
							checkPassword : function() {
								return $("#checkPassword").val();
							}
						}
					}
				},
				smsCode : {
					required : true,
					onkeyup : false,
					remote : { 
						type : "POST",
						async:false,
						url : "${ctxWeb}/sms/checkCode2", //servlet
						data : {
							mobile : function() {
								return $("#mobile").val();
							},
							code : function() {
								return $("#smsCode").val();
							}
						}
					}
					
				},
				mobile : {
					required : true,
					minlength : 11,
					onkeyup : false,
					remote : { 
						type : "POST",
						url : "${ctxWeb}/register/checkMobile", //servlet
						data : {
							mobile : function() {
								return $("#mobile").val();
							},
							id : function() {
								return "${user.id}";
							}
						}
					}
				}
			},

			messages : {
				email : {
					required : '请输入电子邮件',
					email : '请检查电子邮件的格式',
					remote : '邮箱已存在'
				},
				checkPassword : {
					required : '请输入密码',
					minlength : '密码错误',
					remote : '密码错误'
				},
				smsCode : {
					required : '请输入验证码',
					remote : '验证码错误或已过期'
				},
				mobile : {
					required : '请输入手机号码',
					minlength : '格式不正确',
					remote : '手机号存在'
				}
			},

			errorElement : "em",
		});
	});
	
	function sub() {
		if(subflag){
			return;
		}
		var checkFlag = true;
		$("#smsCode").removeData("previousValue"); //解决提交时读取异步验证的缓存结果
		if (!$("#updateForm").valid()) {
			checkFlag = false;
		}
		if (!checkFlag) {
			return false;
		}
		$("#updateForm").submit();
		subflag = true;
	}
	
	//验证码
	var clock = '';
	var resetTime = 60;
	var nums = 60;
	var btn;

	function getSmsCode(thisBtn) {
		if (!$("#updateForm").validate().element("#mobile")) {
			return;
		}
		btn = thisBtn;
		btn.disabled = true; //将按钮置为不可点击 
		$.ajax({
			data : {
				"mobile" : $("#mobile").val()
			},
			type : "post",
			url : "${ctxWeb}/sms/getCode",
			dataType : "json",
			success : function(data) {
				$(btn).removeClass("bg_red_btn");
				$(btn).addClass("bg_gry");
				$(btn).html(nums + '秒后可重新获取');
				clock = setInterval(doLoop, 1000); //一秒执行一次
			},
			error : function(data) {
				btn.disabled = false; //将按钮置为不可点击 
				alert("网络异常");
			}
		})
	}

	function doLoop() {
		nums--;
		if (nums > 0) {
			$(btn).html(nums + '秒后可重新获取');
		} else {
			clearInterval(clock); //清除js定时器
			$(btn).removeClass("bg_gry");
			$(btn).addClass("bg_red_btn");
			$(btn).html('获取验证码');
			btn.disabled = false;
			nums = resetTime; //重置时间
		}
	}
	//验证码#
	
</script>
</head>
<body>
	<!-- 右边部分 -->
	<div class="col-sm-10 pad20 pad_10">
		<div class="Credit_right">
			<!--个人信息-->
			<div class="goods_detail_info_box mar_16 clearfix">
				<h3>
					<span>个人信息</span>
				</h3>
				<div class="company_msg clearfix">
					<form:form modelAttribute="user" id="updateForm" method="post" action="${ctxWeb}/userInfo/update">
						<div class="form-group clearfix">
							<label for="firstname"
								class="col-sm-3 col-xs-4 input_info control-label">
								电子邮箱： </label>
							<div class="col-sm-9 col-xs-8 input_left">
								<form:input type="email" id="email" path="email" class="form-control"
									placeholder="请输入电子邮箱" />
							</div>
						</div>
						<div class="form-group Code_form clearfix">
							<label for="firstname"
								class="col-sm-3 col-xs-4 input_info control-label">
								手机号码： </label>
							<div class="col-sm-9 col-xs-8 input_left">
								<form:input type="tel" id="mobile" path="mobile" class="form-control"
									placeholder="请输入手机号码" />
								<button class="get_code bg_red_btn" type="button" id="smsCodeBtn" onclick="getSmsCode(this)" >获取验证码</button>
							</div>
						</div>
						<div class="form-group Code_form clearfix">
							<label for="firstname"
								class="col-sm-3 col-xs-4 input_info control-label"> 验证码：
							</label>
							<div class="col-sm-9 col-xs-8 input_left">
								<input type="text" id="smsCode" name="smsCode" class="form-control" maxlength="6"
									placeholder="请输入手机验证码">
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="firstname"
								class="col-sm-3 col-xs-4 input_info control-label">
								验证密码： </label>
							<div class="col-sm-9 col-xs-8 input_left">
								<input type="password" id="checkPassword" name="checkPassword" maxlength="20"
									class="form-control" placeholder="请输入密码">
							</div>
						</div>
						<p class="modify_btn  mar_t30 col-sm-offset-3 col-xs-offset-4">
							<a href="javascript:void(0)" class="modify_item" onclick="sub()">修改</a> <a
								href="${ctxWeb}/userInfo/toPassword" class="modify_password">修改密码</a>
						</p>
					</form:form>
				</div>
			</div>
		</div>
	</div>
	<!-- 右边部分 end-->
</body>
</html>
